<template>
    <el-select
      v-if="dataType == 'select'"
      v-model="state.selectValue"
      :disabled="disabled"
      :placeholder="placeholder"
      :clearable="clearable"
      :multiple="multiple"
      :multiple-limit="multipleLimit"
      :filterable="filterable"
      @change="handleSelect"
      :size="size"
      :collapse-tags="collapseTags"
     
    >
      <el-option
        v-for="item in state.options"
        :key="item.dictValue"
        :label="item.dictLabel"
        :value="item.dictValue"
        :disabled="item.status == 2"
      >
        <div class="jcb aic">
          <span> {{ item.dictLabel }} </span>
          <!-- <span>  {{item.remark}} </span> -->
        </div>
      </el-option>
    </el-select>
    <el-radio-group
      v-if="dataType == 'radioButton'"
      @change="handleSelect"
      v-model="state.selectValue"
      :disabled="disabled"
      :size="size"
    >
      <el-radio-button
        v-for="item in state.options"
        :key="item.dictValue"
        :label="item.dictValue"
        >{{ item.dictLabel }}</el-radio-button
      >
    </el-radio-group>

    <el-radio-group
      v-if="dataType == 'radio'"
      v-model="state.selectValue"
      :disabled="disabled"
      @change="handleSelect"
      :size="size"
    >
      <el-radio
        style="margin-bottom: 10px"
        v-for="item in state.options"
        :key="item.dictValue"
        :label="item.dictValue"
        >{{ item.dictLabel }}</el-radio
      >
    </el-radio-group>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, onMounted, watch } from "vue";
import { getDicts } from "/@ts/axios/urlApi/system";

const emit = defineEmits(["update:modelValue"]);
const state = reactive({
  options: [],
  selectValue: "",
});

let prop = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: "",
  },
  size: {
    type: String,
    default: "",
  },

  dataType: {
    // 渲染类型  radioButton select
    type: String,
    default: "select",
  },
  dictCode: {
    type: String,
    default: "",
  },
  // 禁用数据
  disabledData: {
    type: [Array, Boolean],
    default: false,
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 是否可以清空
  clearable: {
    type: Boolean,
    default: true,
  },
  // 是否可以多选
  multiple: {
    type: Boolean,
    default: false,
  },
  multipleLimit: {
    type: Number,
    default: null,
  },
  // 是否可以筛选
  filterable: {
    type: Boolean,
    default: true,
  },
  // 占位符
  placeholder: {
    type: String,
    default: "请选择",
  },
  collapseTags: {
    type: Boolean,
    default: true,
  },
});

const getData = (key: any) => {
  getDicts(key).then((response: any) => {
    state.options = response.data;
  });
};
watch(
  () => prop.modelValue,
  (val: any) => {
    state.selectValue = val;
  },
  {
    deep: true,
    immediate: true,
  },
);
watch(
  () => prop.dictCode,
  (val: any) => {
    if (val) {
      if (state.options.length == 0) {
        getData(val);
      }
    }
  },
  {
    deep: true,
    immediate: true,
  },
);
const handleSelect = () => {
  emit("update:modelValue", state.selectValue);
};
</script>

<style scoped lang="scss"></style>
